<template>
	<view>
		<UserInfoCard></UserInfoCard>
		<!-- <FilterButton :is-record="isRecord" :dateFilters="dateFilters" :active-date="activeDate"
			:selected-time-range="selectedTimeRange" @updateActiveDate="updateActiveDate"
			@time-range-selected="handleChangeTimeRange"></FilterButton> -->
		<view class='page-container'>
			<view v-for="(item,index) in dataSource" :key="index">
				<view class="mar-10-0">
					<view class="sheet-header">
						<view class="title-container">
							<view class="sheet-dept">{{ item.ksmc }}</view>
						</view>
					</view>
					<view class="info-sheet">
						<view class="sheet-row">
							<view class="label">住院患者</view>
							<view class="value">{{item.hzxm}}</view>
						</view>
						<view class="sheet-row">
							<view class="label">手术名称</view>
							<view class="value">{{item.ssmc}}</view>
						</view>
						<view class="sheet-row">
							<view class="label">主刀医生</view>
							<view class="value">{{item.zgmc}}</view>
						</view>
						<view class="sheet-row">
							<view class="label">手术日期</view>
							<view class="value">{{item.sqrq}}</view>
						</view>
						<ButtonAllVue btn-l="查看详情" @cancel="toOperateDetailPage(item)" btn-r="去住院预交"
							@click="toInHospitalPayPage"></ButtonAllVue>

					</view>
				</view>

			</view>
		</view>
	</view>

</template>
<script>
	import ButtonAllVue from '../../../components/Button/ButtonAll.vue';
	import UserInfoCard from '../../../components/UserInfo/UserInfoCard.vue';
	// import FilterButton from '../../../components/FilterButton/FilterButton.vue'
	import {
		mapGetters,
	} from 'vuex'
	import {
		inHospitalOperate
	} from '../../../api/inHospital';
	import {
		dateFormat,
		getPastDate
	} from '../../../utils/assist';
	export default {
		components: {
			UserInfoCard,
			// FilterButton,
			ButtonAllVue
		},
		computed: {
			...mapGetters(["userInfo"]),

		},
		data() {
			return {
				isRecord: true,
				activeDate: '1m',
				dateFilters: [{
						label: '一月内',
						value: '1m'
					},
					{
						label: '半年内',
						value: '6m'
					},
					{
						label: '一年内',
						value: '1y'
					},
					// {
					// 	label: '全部',
					// 	value: 'all'
					// },
				],
				beginTime: '',
				endTime: '',
				dataSource: []
			}
		},
		mounted() {
			this.setSelectDate()
			this.init()
		},
		methods: {
			init() {
				inHospitalOperate({
					// patId: this.userInfo.patId
					patId: '1850'
				}).then(res => {
					console.log(res)
					if (res.length > 0) {
						this.dataSource = res;
					}
				})
			},
			updateActiveDate(value) {
				this.activeDate = value;
				this.setSelectDate()
				this.init();
			},
			handleChangeTimeRange(e) {
				this.beginTime = e.startDate;
				this.endTime = e.endDate
				this.init();
			},
			setSelectDate() {
				this.endTime = dateFormat('yyyy-MM-dd', new Date())
				switch (this.activeDate) {
					case '1m':
						this.beginTime = getPastDate(1, 'month')
						break;
					case '6m':
						this.beginTime = getPastDate(6, 'month')
						break;
					case '1y':
						this.beginTime = getPastDate(12, 'month')
						break;
					case 'all':
						this.beginTime = getPastDate(120, 'month')
						break;
					default:
						// timeMatch = true;
				}
				this.beginTime = dateFormat(('yyyy-MM-dd'), new Date(this.beginTime))
			},
			toInHospitalPayPage(item) {
				uni.navigateTo({
					url: `/pages/Home/ServeHospital/InHospitalPayment?item=` + JSON.stringify(item)
				})
			},
			toOperateDetailPage(item) {
				uni.navigateTo({
					url: `/pages/Home/ServeHospital/OperationDetail?item=` + JSON.stringify(item)
				})
			}
		}
	}
</script>
<style lang='scss' scoped>
	.page-container {
		padding: 16rpx;
	}

	.info-sheet {
		background: #fff;
		box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.08);
		padding: 16rpx;
		border-radius: 0px 0px 8px 8px;
	}

	.sheet-header {
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 16rpx;
		height: 40px;
		background: #E2FDFF;
		border-radius: 8px 8px 0px 0px;
		border: 1px solid #CAF7FA;
	}

	.title-container {
		position: relative;
	}

	.sheet-dept {
		font-size: 32rpx;
		color: #333;
		font-weight: bold;
	}

	.title-bg {
		position: absolute;
		width: 48rpx;
		height: 15rpx;
		background-color: rgba(65, 207, 230, 0.5);
		bottom: 0;
		left: calc(20%);
		z-index: 0;
	}

	.sheet-status {
		background: #4ad49a;
		color: #fff;
		font-size: 24rpx;
		border-radius: 8rpx;
		padding: 4rpx 18rpx;
		right: 8rpx;
	}

	.sheet-status.nobook {
		background: #eba242;
	}

	.sheet-status.booked {
		background: #bd4d4d;
	}

	.sheet-divider {
		height: 1rpx;
		border-top: 1rpx dashed #e0e0e0;
		margin: 18rpx 0 18rpx 0;
		width: 100%;
	}

	.sheet-row {
		display: flex;
		align-items: center;
		margin-bottom: 16rpx;
	}

	.label {
		color: #888;
		font-size: 28rpx;
		width: 160rpx;
	}

	.label.newchild {
		width: 170rpx;
	}

	.value {
		color: #333;
		font-size: 28rpx;
		flex: 1;
	}

	.vital {
		color: #ca3333;
	}

	.nav-btn {
		background: #e0f3ff;
		color: #1ec6e6;
		font-size: 22rpx;
		border-radius: 24rpx;
		padding: 0 18rpx;
		height: 40rpx;
		line-height: 40rpx;
		border: none;
		margin-left: 12rpx;
	}

	.sheet-btn-row {
		display: flex;
		justify-content: space-between;
		margin: 30rpx 0 15rpx;
	}

	.money-text {
		font-size: 32rpx;
		margin: 8rpx 100rpx 0 0;
	}

	.line-btn {
		width: 48%;
		height: 64rpx;
		background: #fff;
		color: #1ec6e6;
		font-size: 28rpx;
		border-radius: 44rpx;
		border: 1rpx solid #1ec6e6;
		text-align: center;
		line-height: 64rpx;
	}

	.cover-btn {
		width: 48%;
		height: 64rpx;
		background: linear-gradient(90deg, #6ed6f7 0%, #3ec6e7 100%);
		color: #fff;
		font-size: 28rpx;
		border-radius: 44rpx;
		text-align: center;
		line-height: 64rpx;
		border: none;
	}
</style>